<template>
  <el-drawer :before-close="handleClose" :visible.sync="visible" append-to-body class="drawer-container" size="800px"
             title="授权用户">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
      <el-form-item label="用户名称" prop="name">
        <el-input v-model="queryParams.name" clearable placeholder="请输入用户名称" style="width: 240px"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="queryParams.mobile" clearable placeholder="请输入手机号码" style="width: 240px"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-button v-has-permi="['system:role:add']" icon="el-icon-plus" plain size="mini" type="primary"
                 @click="openSelectUser">添加用户
      </el-button>
      <el-button v-has-permi="['system:role:remove']" :disabled="multiple" icon="el-icon-circle-close" plain size="mini"
                 type="danger" @click="cancelAuthUserAll">批量取消授权
      </el-button>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </div>
    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column :show-overflow-tooltip="true" label="用户名称" prop="name"/>
      <el-table-column :show-overflow-tooltip="true" label="用户编号" prop="code"/>
      <el-table-column :show-overflow-tooltip="true" label="邮箱" prop="email"/>
      <el-table-column :show-overflow-tooltip="true" label="手机" prop="mobile"/>
      <el-table-column align="center" label="状态" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="createTime" width="180"/>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button v-has-permi="['system:role:remove']" icon="el-icon-circle-close" size="mini" type="text"
                     @click="cancelAuthUser(scope.row)">取消授权
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <select-user ref="select" :roleId="queryParams.roleId" @ok="handleQuery"/>
  </el-drawer>
</template>

<script>
import {allocatedUserList, authUserCancel, authUserCancelAll} from "@/api/system/role";
import selectUser from "./SelectUserCard.vue";

export default {
  name: "ScopeCard",
  components: {selectUser},
  data() {
    return {
      // 选中用户组
      ids: [],
      // 非多个禁用
      roleId: undefined,
      visible: false,
      // 遮罩层
      loading: true,
      baseUrl: '/system/user/role/',
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 用户表格数据
      dataList: [],
      pageParam: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      // 查询参数
      queryParams: {
        roleId: undefined,
        userName: undefined,
        phonenumber: undefined
      }
    };
  },
  created() {},
  methods: {
    /** 查询授权用户列表 */
    getList() {
      this.loading = true;
      allocatedUserList(this.queryParams).then(response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pageParam.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.userIds = selection.map(item => item.userId)
      this.multiple = !selection.length
    },
    /** 打开授权用户表弹窗 */
    openSelectUser() {
      this.$refs.select.show();
    },
    /** 取消授权按钮操作 */
    cancelAuthUser(row) {
      const roleId = this.queryParams.roleId;
      this.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(function () {
        return authUserCancel({userId: row.userId, roleId: roleId});
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("取消授权成功");
      }).catch(() => {
      });
    },
    /** 批量取消授权按钮操作 */
    cancelAuthUserAll(row) {
      const roleId = this.queryParams.roleId;
      const userIds = this.userIds.join(",");
      this.$modal.confirm('是否取消选中用户授权数据项？').then(function () {
        return authUserCancelAll({roleId: roleId, userIds: userIds});
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("取消授权成功");
      }).catch(() => {
      });
    },
    // 返回按钮
    handleClose() {
      const obj = {path: "/system/role"};
      this.$tab.closeOpenPage(obj);
    },
  }
};
</script>
